<template>
    <div class="drop-down-search searchInput">

        <Input
            @on-change="showResultAction"
            @on-keyup="showResultAction"
            @on-blur="inputBlurAction"
            @on-focus="checkShowPanel"
            v-model="inputVal"></Input>

        <span class="downUp iconfont icon-triangle-down"></span>

        <!--显示下拉面板-->
        <div v-show="showSelectPanel" class="content-panel"  @mouseenter="mouseEnterAction" @mouseleave="mouseLeaveAction">
            <div v-for="(temp, index) in datalist" :key="index" @click="selectChange($event,temp)">{{temp.name}}</div>
        </div>

        <!--显示tree的面板-->
        <div class="content-panel" v-show="showTreePanel" @mouseenter="mouseEnterAction" @mouseleave="mouseLeaveAction">
            <ztree-vue v-if="isInitZtree"
                :nodeIdKey="ztreeSetting.nodeIdKey"
                :nodePidKey="ztreeSetting.nodePidKey"
                :nodeHtmlKey="ztreeSetting.nodeHtmlKey"
                :ztreeData="ztreeData"
                @on-click="selectChange"
            ></ztree-vue>
        </div>

    </div>
</template>

<script>

    import getData from "../../server/getData.js"

    // 该变量用来缓存组织机构的数据
    var treeDataCache = null;
    // 是否获取了数据的请求，true表示已经发送了请求，则再次引入该组建，则不用发送该请求
    var isGetdataFlag = false;
    // 用来记录发送ajax请求还没有返回数据时的一种回调
    var ajaxPromise = false;
    function treeDataToObject(ztreeData){
        var result = {};
        var length = ztreeData.length;
        for(var i = 0; i < length; i++){
            var tempObj = ztreeData[i];
            result[tempObj.orgId] = tempObj;
        }
        return result;
    }

    export default {
        props:{
            value:{
                type: String,
                default: "",
            }
        },
        mounted: function() {
            var that = this;
            // 如果第一次没有发送请求，则发送请求，并且标记为已经发送了请求
            if(!isGetdataFlag){
                isGetdataFlag = true;
                // 获取机构的数据
                ajaxPromise = this.getOrganizationsData();
                // 发送请求成功时的回调
                ajaxPromise.done(function(responseData){
                    // 设置默认选中的值
//                    that.ztreeDataMap = treeDataToObject(treeDataCache);
//                    var selectedNode = that.ztreeDataMap[that.value];
//                    if(selectedNode != undefined){
//                        that.selectChange(null,selectedNode);
//                    }
//                    that.ztreeData = treeDataCache;
                });
            }
            // 表示已经发送了请求
            else{
                // 如果还没有得到数据，就需要等待数据返回来，在执行tree的初始化动作
                if(treeDataCache == null){
                    // 发送请求成功时的回调
                    ajaxPromise.done(function(responseData){
                        // 设置默认选中的值
                        that.ztreeDataMap = treeDataToObject(treeDataCache);
                        var selectedNode = that.ztreeDataMap[that.value];
                        if(selectedNode != undefined){
                            that.selectChange(null,selectedNode);
                        }
                        that.ztreeData = treeDataCache;
                    });
                }
                // 数据已经返回来了，则直接treeData 用来初始化
                else{
                    // 设置默认选中的值
                    this.ztreeDataMap = treeDataToObject(treeDataCache);
                    var selectedNode = this.ztreeDataMap[this.value];
                    if(selectedNode != undefined){
                        this.selectChange(null,selectedNode);
                    }
                    this.ztreeData = treeDataCache;
                }
            }
        },
        data() {
            return {
                // 存放组织机构树的数据
                ztreeData: [],
                // 将组织机构树的树形结构转为JSON对象
                ztreeDataMap: {},
                ztreeSetting: {
                    nodeIdKey: 'orgId',
                    nodePidKey: 'parentId',
                    nodeHtmlKey: 'orgName',
                    isSimpleData: true,
                    selectedMulti: false,
                    // 是否是Outlook 风格，如果是 outlook风格，则默认就不是checkbox
                    isOutlookStyle: true,
                },
                // 显示tree面板
                showTreePanel: false,
                // 显示下拉面板
                showSelectPanel:false,

                inputVal: '',
                baseData1:[],
                // 记录过滤数据显示的记录数
                datalist:[],
                // 关闭面板的标记，如果为true表示允许隐藏，如果为false,表示不允许隐藏
                closePanelFlag:false,
            }
        },
        computed:{
            isInitZtree:function(){
                if(this.ztreeData.length > 0){
                    return true;
                }
                return false;
            }
        },
//        watch:{
//            ztreeId
//        },
        methods: {
            // 表单聚焦的时候检查显示tree 还是 显示 list 面板格式
            checkShowPanel: function(){
                this.showResultAction()
            },
            // 鼠标进入，表示不允许隐藏面板
            mouseEnterAction: function(){
                this.closePanelFlag = false;
            },
            // 鼠标离开，表示允许隐藏面板
            mouseLeaveAction: function(){
                this.closePanelFlag = true;
            },

            // input框失去焦点的时候隐藏面板
            inputBlurAction: function(){
                if(this.closePanelFlag){
                    this.showTreePanel = false;
                    this.showSelectPanel = false;
                }
            },

            // 隐藏所有面板
            hidePanel: function(){
                this.showTreePanel = false;
                this.showSelectPanel = false;
            },

            // 选择结果触发的事件
            selectChange:function(eventObj,NodeObj){
                console.dir(eventObj);
                this.inputVal = NodeObj.orgName;
                // 隐藏面板
                this.hidePanel();
                this.$emit("select-change",NodeObj);
                this.$emit("input",NodeObj.orgId);
            },

            // 显示筛选的结果（包含显示tree面板  和 list 面板的判断）
            showResultAction:function(val){
                // 显示面板
                // 显示tree的面板，隐藏select的面板
                if(this.inputVal == "" || this.inputVal == undefined || this.inputVal == null){
                    this.showTreePanel = true;
                    this.showSelectPanel = false;
                }else{
                    this.showTreePanel = false;
                    this.showSelectPanel = true;

                    this.datalist = [];
                    var ztreeServerData = this.ztreeData;
                    var name = this.nodeHtmlKey;
                    for(var i = 0;i<ztreeServerData.length;i++){
                        if(ztreeServerData[i].name.indexOf(this.inputVal) > -1){
                            this.datalist.push(ztreeServerData[i]);
                        }
                    }
                }

            },

            //获取机构数据
            getOrganizationsData: function() {
                var that = this;
                //在函数内部，新建一个Deferred对象
                var dtd = $.Deferred();
                getData.get("getAllOrganizations").then(function(res){
                    // 设置默认选中的值
                    that.ztreeDataMap = treeDataToObject(res.data.data);
                    var selectedNode = that.ztreeDataMap[that.value];
                    if(selectedNode != undefined){
                        that.selectChange(null,selectedNode);
                    }
                    // ztree的数据
                    treeDataCache = that.ztreeData = res.data.data;
                    // 改变Deferred对象的执行状态
                    dtd.resolve(treeDataCache);
                });
                // 返回promise对象
                return dtd.promise();
            }
        },

    }
</script>


<style lang="scss">
    .drop-down-search {

        /* 显示下拉提示内容 */
        .content-panel {
            position: absolute;
            top: 30px;
            background: #fff;
            width: 100%;
            box-shadow: 0 1px 6px rgba(0,0,0,.2);
            overflow: auto;
            margin: 5px 0;
            padding: 5px 0;;
            z-index: 99;
        }
        .searchInput{
            width:350px;
            position: relative;
        }
        .searchInput:hover{
            cursor: pointer;
        }
        .downUp{
            position: absolute;
            right: 12px;
            top: 3px;
        }

        input:hover{
            cursor: pointer;
        }
    }
</style>
